<template>
  <!--  生成动态菜单 -->
  <template v-for="item in data" :key="item.path">
    <!-- ---带有子菜单的一级菜单 -->
    <!-- 根据item是否有children属性，判断-是要生成el-menu-item  还是 el-sub-menu -->
    <el-sub-menu v-if="item.children" :index="item.path">
      <template #title>
        <el-icon>
          <!-- 根据字符串-改变下面组件的名字 -->
          <!-- <House /> -->
          <component :is="item.icon"></component>
        </el-icon>
        <span>{{ item.title }}</span>
      </template>

      <!-- 二级菜单 要根据  item.children 生成 el-menu-item或者el-sub-menu-->

      <!-- 递归组件 -->
      <!-- 递归--做某个事情过程中，又要做这个事情 -->
      <menu-tree :data="item.children"></menu-tree>
    </el-sub-menu>
    <!-- ---没有子菜单的一级菜单 -->
    <el-menu-item v-else :index="item.path">
      <el-icon>
        <!-- 根据字符串-改变下面组件的名字 -->
        <!-- <House /> -->
        <component :is="item.icon"></component>
      </el-icon>
      <span>{{ item.title }}</span>
    </el-menu-item>
  </template>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
// 一个vue文件就是一个组件
// 组件有属性-》
//  1-组件内部定义支持的属性：props:['属性名']
//  2-使用组件的时候就可以传入属性<menu-tree :属性名="变量">
// 组件有事件->

const props = defineProps(['data'])
//使用父组件传递过来的属性
console.log(props.data)
</script>

<style></style>
